<template>
  <div>
    <a-button class="editable-add-btn" style="margin-bottom: 8px" type="primary" @click="handleAdd">新增引流活动</a-button>

    <a-table bordered :data-source="dataSource" :columns="columns" ellipsis=true>
      <template #status="{ text: status }">
        <span>
          <a-tag :color="StatusMap[status].color">
              {{StatusMap[status].text}}
          </a-tag>
        </span>
      </template>
      <template #is_anonymous="{ text: is_anonymous }">
        <span v-if="is_anonymous">是</span>
        <span v-else>否</span>
      </template>
      <template #operation="{record}">
        <a-space>
          <template v-if="getStorageRole() !== 1">
            <a-popconfirm v-if="dataSource.length" title="确定要删掉吗?" ok-text="是" cancel-text="否"
              @confirm="onDelete(record.activity_id)">
              <!-- 店铺管理员 -->
              <template v-if="getStorageRole()===2">
                <!-- 本店活动有权删除 -->
                <template v-if="record.shop_id===current_shop_id">
                  <a>删除</a>
                </template>
                <template v-else>
                  <a-tooltip title="您没有权限删除该活动">
                    <a disabled>删除</a>
                  </a-tooltip>
                </template>
              </template>
              <!-- 后台管理员 -->
              <template v-else>
                <a>删除</a>
              </template>
            </a-popconfirm>
          </template>

          <template v-if="getStorageRole() === 2">
            <template v-if="record.shop_id===current_shop_id">
              <a @click="onEdit(record)">修改</a>
            </template>
            <template v-else>
              <a-tooltip title="您没有权限修改该活动">
                <a disabled>删除</a>
              </a-tooltip>
            </template>
          </template>
        </a-space>
      </template>
    </a-table>

    <a-modal v-model:visible="visible" :title="modalStatus ? '修改引流活动' : '新增引流活动'" 
        @ok="handleOk" @cancel="handleCancel" okText="确定" cancelText="取消">

      <a-form :model="formState" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" autocomplete="off">
          <a-form-item label="店铺 id" name="shop_id">
              <a-input v-model:value="formState.shop_id" :disabled="modalStatus===1"/>
          </a-form-item>
          <a-form-item label="活动 id" name="activity_id">
              <a-input v-model:value="formState.activity_id" :disabled="modalStatus===1"/>
          </a-form-item>
          <a-form-item label="活动名称" name="title">
            <a-input v-model:value="formState.title" />
          </a-form-item>
          <a-form-item label="活动介绍" name="introduction">
              <a-textarea v-model:value="formState.introduction" />
          </a-form-item>
          <a-form-item label="活动状态" name="status">
              <a-select v-model:value="formState.status">
                  <a-select-option :value="1">进行中</a-select-option>
                  <a-select-option :value="2">已完成</a-select-option>
                  <a-select-option :value="3">下线</a-select-option>
              </a-select>
          </a-form-item>
          <a-form-item label="是否在游客界面展示" name="is_anonymous">
            <a-select v-model:value="formState.is_anonymous">
                <a-select-option :value="true">是</a-select-option>
                <a-select-option :value="false">否</a-select-option>
            </a-select>
          </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';

import { getActivityList, addActivity, deleteActivity, updateActivity } from '../../service/api/activity';
import { getStorageRole } from '../../utils/index';

const dataSource = ref([]);
const columns = [
  {
    title: '店铺 id',
    dataIndex: 'shop_id',
  },
  {
    title: '活动 id',
    dataIndex: 'activity_id',
  },
  {
    title: '活动名称',
    dataIndex: 'title',
  },
  {
    title: '活动介绍',
    dataIndex: 'introduction',
  },
  {
    title: '活动状态',
    dataIndex: 'status',
    slots: {
      customRender: 'status',
    },
  },
  {
    title: '是否在游客界面展示',
    dataIndex: 'is_anonymous',
    align: "center",
    width: 160,
    slots: {
      customRender: 'is_anonymous',
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: "center",
    width:120,
    slots: {
      customRender: 'operation',
    },
  },
];
const current_shop_id = ref([]);

const useHttpRequestEffect = () => {
  const getActivityListRequest = async () => {
    const res = await getActivityList();
    dataSource.value = res?.data?.activity_list;
    current_shop_id.value = res?.data?.current_shop_id;
  }
  const deleteActivityRequest = async (id) => {
    const res = await deleteActivity(id);
    if (res?.data?.res) {
      message.success("删除成功")
    } else {
      message.error("删除失败")
    }
  }
  const addActivityRequest = async (data) => {
        const res = await addActivity(data);
        if (res?.data?.res) {
            message.success("添加成功")
        } else {
            message.error("添加失败")
        }
    }
  const updateActivityRequest = async (data) => {
      const res = await updateActivity(data);
      if (res?.data?.res) {
          message.success("修改成功")
      } else {
          message.error("修改失败")
      }
  }
  return { getActivityListRequest, deleteActivityRequest, addActivityRequest, updateActivityRequest }
}

const useModalEffect = () => {
  const visible = ref(false);
  const formState = ref({});
  const modalStatus = ref(0); // 0新增 1编辑

  const { addActivityRequest, deleteActivityRequest, updateActivityRequest } = useHttpRequestEffect();
  const onDelete = id => {
    dataSource.value = dataSource.value.filter(item => item.activity_id !== id);
    deleteActivityRequest(id);
  };
  const onEdit = item => {
    formState.value = item;
    modalStatus.value = 1;
    visible.value = true;
  };
  const handleAdd = () => {
    modalStatus.value = 0;
    visible.value = true;
  };
  const handleOk = () => {
    if (modalStatus.value === 0) {
        dataSource.value.push(formState.value);
        addActivityRequest(formState.value);
    } else if (modalStatus.value === 1) {
      updateActivityRequest(formState.value);
    }
    visible.value = false;
    formState.value = [];
  };
  const handleCancel = () => {
    visible.value = false;
    formState.value = [];
  }
  return {
      visible, formState, modalStatus,
      onEdit, onDelete, handleOk, handleCancel,
      handleAdd
  }
}

export default defineComponent({

  setup() {
    const { getActivityListRequest } = useHttpRequestEffect();
    const {
        visible, formState, modalStatus,
        onEdit, onDelete, handleOk, handleCancel,
        handleAdd } = useModalEffect();

    const StatusMap = {
      1: {
        text: "进行中",
        color: "pink",
      },
      2: {
        text: "已完成",
        color: "blue",
      },
      3: {
        text: "下线",
        color: "orange",
      }
    }

    onMounted(async () => {
      await getActivityListRequest();
      console.log(current_shop_id.value);
    });

    return {
      columns,
      dataSource,
      current_shop_id,
      getStorageRole,
      StatusMap,
      visible,
      formState,
      modalStatus,
      onEdit,
      onDelete,
      handleOk,
      handleCancel,
      handleAdd,
    };
  },
});
</script>

<style scoped>
.editable-add-btn{
    background-color: rgb(24, 144, 255);
    color:#fff;
}
.editable-add-btn:hover{
    background-color: rgb(24, 132, 234);
}
.editable-add-btn:active{
    background-color: rgb(117, 178, 236);
}
</style>